<!-- StatusTag.vue -->
<template>
    <span class="status-tag" :class="statusClass">
      <span class="status-dot" :class="dotClass"></span>
      {{ statusText }}
    </span>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  interface Props {
    status: 'onSale' | 'unSale'
  }
  
  const props = defineProps<Props>()
  
  const statusText = computed(() => {
    return props.status === 'onSale' ? '启售' : '停售'
  })
  
  const statusClass = computed(() => {
    return props.status === 'onSale' ? 'status-on' : 'status-off'
  })
  
  const dotClass = computed(() => {
    return props.status === 'onSale' ? 'dot-on' : 'dot-off'
  })
  </script>
  
  <style scoped>
  .status-tag {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }
  
  .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
  }
  
  .dot-on {
    background-color: #4CAF50;
  }
  
  .dot-off {
    background-color: red;
  }
  </style>